<template>
  <view class="">
    <view style="background: #fff">
      <u-tabs
        :list="tabList"
        @click="tabClick"
        :activeStyle="{
          color: '#1E1E1E',
          fontWeight: 'bold',
          transform: 'scale(1.05)',
        }"
        :current="tabActive.index"
        lineWidth="22"
        lineColor="#02409A"
      ></u-tabs>
    </view>
    <view class="main">
      <template v-if="orderList?.length > 0">
        <view>
          <OrderItem />
          <!-- <GoodsOrderItem
            v-for="(item, index) in orderList"
            :key="item.goodId"
            @click="goPage(`/pages/goodsDetails/goodsOrderDetails?orderId=${item.orderNo}`)"
            :info="item"
            :getOrderList="reset"
          ></GoodsOrderItem> -->
          <u-loadmore height="30" :status="pageStatus" />
        </view>
      </template>
      <view v-else style="width: 100%; display: flex; justify-content: center">
        <u-empty mode="list"></u-empty>
      </view>
    </view>
  </view>
</template>

<script setup lang="ts">
import { ref } from "vue";
import OrderItem from "../../../components/orderItem.vue";
type tabProps = {
  name: string;
  value: string;
  index?: number;
};
const tabActive = ref({
  index: 0,
  value: "",
});
const pageStatus = ref(false);
const orderList = ref([{}]);
const tabList = ref<tabProps[]>([
  {
    name: "全部",
    value: "",
  },
  {
    name: "待付款",
    value: "WAIT_PAY",
  },
  {
    name: "待发货",
    value: "PAY_SUCCESS",
  },
  {
    name: "待收货",
    value: "IN_DISTRIBUTION",
  },
  {
    name: "已完成",
    value: "CONFIRM_RECEIPT",
  },
]);
const tabClick = () => {};
</script>

<style lang="less" scoped>
/deep/ .u-tabs__wrapper__nav__item {
  padding: 0 21px !important;
}
.main {
  margin-top: 20rpx;
}
</style>
